<template>
  <div class="main-container">
    
    <div class="search-setting">
      <div class="car-price">
        <span>汽车价格:</span>
        <el-radio-group v-model="radio0">
          <el-radio-button
            label="不限"
            style="padding-left: 20px"
          ></el-radio-button>
          <el-radio-button label="0-15万"></el-radio-button>
          <el-radio-button label="15-25万"></el-radio-button>
          <el-radio-button label="25-30万"></el-radio-button>
          <el-radio-button label="30万以上"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="car-level">
        <span>汽车类型:</span>
        <el-radio-group v-model="radio1">
          <el-radio-button
            label="不限"
            style="padding-left: 20px"
          ></el-radio-button>
          <el-radio-button label="跑车"></el-radio-button>
          <el-radio-button label="MPV"></el-radio-button>
          <el-radio-button label="微面"></el-radio-button>
          <el-radio-button label="SUV"></el-radio-button>
          <el-radio-button label="轿车"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="car-energy">
        <span>能源类型:</span>
        <el-radio-group v-model="radio2">
          <el-radio-button
            label="不限"
            style="padding-left: 20px"
          ></el-radio-button>
          <el-radio-button label="汽油"></el-radio-button>
          <el-radio-button label="48V轻混系统"></el-radio-button>
          <el-radio-button label="油电混合"></el-radio-button>
          <el-radio-button label="插电式混合动力"></el-radio-button>
          <el-radio-button label="纯电动"></el-radio-button>
          <el-radio-button label="汽油电驱"></el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="setting">
      <el-card class="card">
        <div class="set-text">已选择:</div>
        <el-tag
          v-for="(item, index) in searchData"
          :key="index"
          closable
          :disable-transitions="false"
          @close="handleClose(item)"
        >
          {{ item }}
        </el-tag>
      </el-card>
    </div>
    <div class="search-view">
      <div class="view-card">
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="demo-image__placeholder">
              <div class="block">
                <el-image :src="src"></el-image>
                <span class="demonstration">默认</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <div v-for="n in 10" :key="n">1111</div>
      </div>
    </div>
  </div>
</template>

<script>
import Index from './index.vue';
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
 
    Index: "SearchView",
  data() {
    //这里存放数据
    return {
      radio0: "不限",
      radio1: "不限",
      radio2: "不限",

      searchData: ["不限", "0-15", "不限"],
      src: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    };

   
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    radio0(to) {
      this.searchData[0] = to;
    },
    radio1(to) {
      this.searchData[1] = to;
    },
    radio2(to) {
      this.searchData[2] = to;
    },
  },
  //方法集合
  methods: {
    handleClose(item) {
      this.searchData.splice(this.searchData.indexOf(item), 1, "不限");
      switch (true) {
        case this.searchData[0] == "不限":
          return (this.radio0 = "不限");
        case this.searchData[1] == "不限":
          return (this.radio1 = "不限");
        case this.searchData[2] == "不限":
          return (this.radio2 = "不限");
      }
    },
  },
};
</script>
<style lang='scss' >
.main-container {
  display: flex;
  flex-direction: column;
  background-color: #e4e7ed;
}

.car-price {
  padding-top: 10px;
  margin-left: 15px;
}

.car-level {
  padding: 1px;
  margin-left: 15px;
}

.car-energy {
  padding: 1px;
  margin-left: 15px;
}

.car-price,
.car-level,
.car-energy {
  height: 6vh;
  display: inline-block;
  text-align: justify;
}

.search-setting {
  margin: 0px 30px;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;

  border-radius: 4px;
}

//.card {
//  background-color: #fff;
//  height: 60%;
//  width: 95%;
//}

.setting {
  background-color: #e4e7ed;
  margin-top: 10px;
  margin-left: 30px;
  margin-right: 30px;
  display: flex;
  justify-content: center;
  align-items: center;

  .el-card__body {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-left: 12px;
    height: 4vh;
    .el-tag {
      margin-right: 10px;
    }
  }

  .el-card__body,
  .el-main {
    padding: 4px;
  }
}

.card {
  background-color: #fff;
  width: 100%;
  transition: 0s !important;
}

.search-view {
  height: 75vh;
  background-color: #e4e7ed;
  display: flex;
  justify-content: center;
}

.view-card {
  height: 60vh;
  width: 100%;
  background-color: #fff;
  margin-top: 10px;
  margin-left: 30px;
  margin-right: 30px;
}



.set-text{
  margin-right: 20px;
}
</style>
